<template>
  <a-card title="文件回收站" style="width: 100%">
    <a-button slot="extra" type="primary" ghost @click="recyleClear">
      清空回收站
    </a-button>
    <a-table :columns="columns"
             :loading="isloading"
             :pagination="false"
             :data-source="recylePage.data"
             rowKey="id">
      <!--      文件类型-->
      <span slot="fileType" slot-scope="type">
      <a-tag
          class="cursor"
          :color="type === 1 ? 'green': type=== 2 ? 'blue' : 'yellowgreen'"
      >
        {{ type === 1 ? '博客': type=== 2 ? '资源' : '观点PK' }}
      </a-tag>
    </span>
      <!--      操作-->
      <span slot="action" slot-scope="text, record">
      <a-space>
        <a-button type="primary" :disabled="$store.state.user.loginUser.type === 3" @click="clickHandler('recovery',record)" size="small"
                  icon="undo" title="文件恢复"></a-button>
        <a-button type="primary" :disabled="$store.state.user.loginUser.type === 3" @click="clickHandler('detail',record)" size="small"
                  icon="account-book" title="查看详情"></a-button>
        <a-button type="danger"
                  size="small"
                  :disabled="$store.state.user.loginUser.type === 3"
                  icon="delete"
                  title="永久删除"
                  @click="clickHandler('remove',record)"></a-button>
      </a-space>
    </span>

      <template slot="footer">
        <a-pagination
            style="text-align: end"
            v-model="recylePage.pageNum"
            :page-size-options="['2', '4', '5']"
            :total="recylePage.total"
            show-size-changer
            :page-size="recylePage.pageSize"
            @showSizeChange="onPageSizeChangeHandler"
            @change="onPageChangeHandler"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {DEFAULT_PAGENUM, DEFAULT_PAGESIZE} from "@/constent";
import {recycleClear, recycleList, recycleRecovery, recycleRemove} from "@/api/recycle";
import moment from "moment";
import encry from '@/utils/encryUtil'

const columns = [
  {
    title: '唯一编号',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    align: 'center',
    scopedSlots: {customRender: 'id'},
  },
  {
    title: '操作人',
    dataIndex: 'admin.userName',
    key: 'admin.userName',
    width: 100,
    ellipsis: true,
    align: 'center',
    scopedSlots: {customRender: 'userName'},
  },
  {
    title: '文件id',
    dataIndex: 'mainId',
    key: 'mainId',
    width: 80,
    ellipsis: true,
    align: 'center',
    scopedSlots: {customRender: 'mainId'},
  },
  {
    title: '删除类型',
    dataIndex: 'removeType',
    width: 100,
    ellipsis: true,
    key: 'removeType',
    align: 'center',
  },
  {
    title: '删除时间',
    key: 'removeDate',
    align: 'center',
    width: 200,
    ellipsis: true,
    dataIndex: 'removeDate',
    scopedSlots: {customRender: 'removeDate'},
    customRender:text => text === null ? '' : moment(text).format("yyyy-MM-DD HH:mm:ss")
  },
  {
    title: '文件类型',
    key: 'fileType',
    align: 'center',
    width: 100,
    ellipsis: true,
    dataIndex: 'fileType',
    scopedSlots: {customRender: 'fileType'},
  },
  {
    title: '删除原因',
    key: 'removeWhy',
    align: 'center',
    width: 200,
    ellipsis: true,
    dataIndex: 'removeWhy',
    scopedSlots: {customRender: 'removeWhy'},
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 200,
    align: 'center',
    scopedSlots: {customRender: 'action'},
  },
];
export default {
  name: "recycle",
  data() {
    return {
      isloading: false,
      recylePage: {
        total: 20,
        pageNum: DEFAULT_PAGENUM,
        pageSize: DEFAULT_PAGESIZE,
      },
      columns,
      queryParam: {
        pageSize: DEFAULT_PAGESIZE,
        pageNum: DEFAULT_PAGENUM
      },
    }
  },
  watch:{
    queryParam:{
      immediate:true,
      deep:true,
      handler:function (newValue){
        this.loadRecyleList();
      }
    }
  },
  methods:{
    // 加载回收站资源
    async loadRecyleList(){
      this.isloading = true;
      let { pageNum,pageSize } = this.queryParam;
      const {code,data,msg} = await recycleList(pageNum,pageSize);
      if (code === 200){
        this.isloading = false;
        this.recylePage = data;
      } else{
        this.$message.error(msg);
      }
    },
    // 点击处理器
    async clickHandler(type,record){
      // 恢复
      if (type === 'recovery'){
        this.recovery(record);
      }else if(type === 'remove'){
        this.remove(record);
      }else if(type === 'detail'){
        this.$router.push({
          name:'recycleDetail',
          params:{
            id: encry.encry(record.id)
          }
        })
      }
    },

    // 恢复
    recovery(record){
      const _this = this;
      this.$confirm({
        title: '恢复文件',
        content: '确认恢复嘛?',
        okText: '确认恢复',
        okType: 'primary',
        cancelText: '放弃',
        onOk() {
          recycleRecovery(record.id).then(res => {
            const { code,msg } = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.loadRecyleList();
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
    // 删除
    remove(record){
      const _this = this;
      this.$confirm({
        title: '删除文件',
        content: '确认删除嘛?此操作不可恢复',
        okText: '确认删除',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          recycleRemove(record.id).then(res => {
            const { code,msg } = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.loadRecyleList();
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
    // 清空回收站
    async recyleClear(){

      const _this = this;
      this.$confirm({
        title: '删除文件',
        content: '确认清空回收站嘛?此操作不可恢复',
        okText: '确认清空',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          recycleClear().then(res => {
            const { code,msg } = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.loadRecyleList();
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
    /**
     * 每页显示条数改变回调
     * @param current
     * @param pageSize
     */
    onPageSizeChangeHandler(current, pageSize) {
      this.queryParam.pageSize = pageSize;
      this.queryParam.pageNum = DEFAULT_PAGENUM;
    },

    /**
     * 当前页改变回调
     * @param current
     * @param pageSize
     */
    onPageChangeHandler(current){
      this.queryParam.pageNum = current;
    },
  }
}
</script>

<style scoped>

</style>
